<template>
  <div class="tables">
    <top-bar-son></top-bar-son>
    <div class="space"></div>
    <!--    筛选条件适配器-->
    <seive-adapter></seive-adapter>
    <!-- 判断传值信息，根据传入的值显示不同的表格 -->
    <!-- 发生次数表 -->
    <vxe-table
        border
        resizable
        show-footer
        ref="xTable"
        height="800"
        align="center"
        :footer-method="footerMethod"
        :data="tableData"
        v-if="titleName === 'happenTable'"
    >
      <vxe-colgroup title="发生次数统计表">
        <vxe-column field="happenDataDate" title="日期" width="50%"></vxe-column>
        <vxe-column field="happenDataTimes" title="发生次数" width="50%"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
    <!-- 能量监测表 -->
    <vxe-table
        border
        resizable
        show-footer
        ref="xTable"
        height="800"
        align="center"
        :footer-method="footerMethod"
        :data="tableData"
        v-if="titleName === 'energyTable'"
    >
      <vxe-colgroup title="能量监测表格">
        <vxe-table-column
            field="happenEnergyDataTime"
            title="日期"
            min-width="180px"
        ></vxe-table-column>
        <vxe-table-column
            field="happenEnergyDataDetail"
            title="能量大小(单位 /10^4J)"
            min-width="180px"
        ></vxe-table-column>
      </vxe-colgroup>
    </vxe-table>
    <!-- 破坏类型表 -->
    <vxe-table
        border
        resizable
        show-footer
        ref="xTable"
        height="800"
        align="center"
        :footer-method="footerMethod"
        :data="tableData"
        v-if="titleName === 'destroyTable'"
    >
      <vxe-colgroup title="破坏类型表格">
        <vxe-table-column field="happenTensorDate" title="日期" width="33%"></vxe-table-column>
        <vxe-table-column field="happenTensorNumber" title="矩张量" width="33%"></vxe-table-column>
        <vxe-table-column field="happenTensorKind" title="类型" width="33%"></vxe-table-column>
      </vxe-colgroup>
    </vxe-table>
    <!-- 严重程度表格 -->
    <vxe-table
        border
        resizable
        show-footer
        ref="xTable"
        height="800"
        align="center"
        :footer-method="footerMethod"
        :data="tableData"
        v-if="titleName === 'damageTable'"
    >
      <vxe-colgroup title="严重程度">
        <vxe-column field="happenBValueDate" title="日期" width="33%"></vxe-column>
        <vxe-column field="happenBValueNumber" title="B值" width="33%"></vxe-column>
        <vxe-column field="happenBValueDegree" title="程度" width="33%"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
    <!-- 台站工况表格 -->
    <vxe-table
        border
        resizable
        show-footer
        ref="xTable"
        height="800"
        align="center"
        :footer-method="footerMethod"
        :data="tableData"
        v-if="titleName === 'stationTable'"
        show-overflow
    >
      <vxe-colgroup title="台站工况">
        <vxe-column field="stationDate" title="日期" width="30%"></vxe-column>
        <vxe-column field="stationPanFu" title="盘符" width="10%"></vxe-column>
        <!--              <vxe-column field="k" title="位置"></vxe-column>-->
        <vxe-column field="stationStatus" title="状态" width="15%"></vxe-column>
        <vxe-column field="stationStore" title="存储" width="20%"></vxe-column>
        <vxe-column field="stationNetSpeed" title="网速" width="25%"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>

<script>
import TopBarSon from "../components/TopBarSon.vue";
import SeiveAdapter from "@/components/SeiveAdapter";
import Qs from "qs";
import {bValueData, energyData, happenTimes, stationData, tensorData} from "@/request/api/tableData";

export default {
  components: {TopBarSon, SeiveAdapter},
  name: "Tables",
  data() {
    return {
      title: this.$store.state.jumpPage.title,
      titleName: this.$store.state.jumpPage.titleRes,
      tableData: [],
    };
  },
  mounted() {
  },
  created() {
    var startTime = this.$store.state.initData.start_time;
    var endTime = new Date().toLocaleDateString();
    var dbTable = this.$store.getters.userAreaSwitchTableName;
    var stationDBName = this.$store.getters.userAreaSwitchTableNameForStations;
    this.RequestInfo(startTime,endTime,dbTable,stationDBName);
  },
  methods: {
    //与后端交互 请求方法
    RequestInfo(startTime,endTime,dbTable,stationDbTable) {
      //获取当前所在模块
      const titleRes = this.$store.state.jumpPage.titleRes;
      if (titleRes) {
        const formText = {
          start_time: startTime,
          end_time: endTime,
          db_table: dbTable
        };
        const formTextStation = {
          start_time: startTime,
          end_time: endTime,
          db_table: stationDbTable
        };
        const formJSONStation = Qs.parse(formTextStation);
        const formJSON = Qs.parse(formText);
        switch (titleRes) {
          case "happenTable":
            happenTimes(formJSON)
                .then(response => {
                  const list = [];
                  for (let index = 0; index < response.data.data.length; index++) {
                    list.push({
                      happenDataTimes: response.data.data[index].happen_times,
                      happenDataDate: response.data.data[index].happen_date
                    });
                    this.tableData = list;
                  }
                })
            break;
          case "energyTable":
            energyData(formJSON)
                .then(response => {
                  const list = [];
                  for (let index = 0; index < response.data.data.length; index++) {
                    list.push({
                      happenEnergyDataTime: response.data.data[index].happenTime,
                      happenEnergyDataDetail: response.data.data[index].happenEnergy
                    });
                    this.tableData = list;
                  }
                })
            break;
          case "destroyTable":
              tensorData(formJSON)
                  .then(response => {
                    const list = [];
                    for (let index = 0; index < response.data.data.length; index++) {
                      list.push({
                        happenTensorDate: response.data.data[index].date,
                        happenTensorNumber: response.data.data[index].tensor,
                        happenTensorKind:response.data.data[index].kind
                      });
                      this.tableData = list;
                    }
                  })
            break;
          case "damageTable":
              bValueData(formJSON)
                  .then(response => {
                    const list = [];
                    for (let index = 0; index < response.data.data.length; index++) {
                      list.push({
                        happenBValueDate: response.data.data[index].date,
                        happenBValueNumber: response.data.data[index].bValue,
                        happenBValueDegree:response.data.data[index].degree
                      });
                      this.tableData = list;
                    }
                  })
            break;
          case "stationTable":
              stationData(formJSONStation)
                  .then(response => {
                    console.log(response);
                    const list = [];
                    for (let index = 0; index < response.data.data.length; index++) {
                      list.push({
                        stationDate: response.data.data[index].date,
                        stationPanFu: response.data.data[index].panfu,
                        stationStatus:response.data.data[index].status,
                        stationNetSpeed:response.data.data[index].netspeed,
                        stationStore:response.data.data[index].unused
                      });
                      this.tableData = list;
                    }
                  })
            break;
        }
      }
    },
    footerMethod({}) {
      return [];
    },
  },
  computed:{
    watchStartTime(){
      return this.$store.state.sieveData.startTime;
    },
    watchEndTime(){
      return this.$store.state.sieveData.endTime;
    },
    watchSieveMineArea(){
      return this.$store.getters.sieveAreaSwitchTableName;
    },

  },
  watch:{
    watchStartTime(data){
      var resultsTableName,stationsTableName = '';
      if (this.$store.state.userInfo.role === 'ROLE_admin'){
        resultsTableName = this.$store.getters.sieveAreaSwitchTableName;
        stationsTableName = this.$store.getters.sieveAreaSwitchStationTableName;
      }else{
        resultsTableName = this.$store.getters.userAreaSwitchTableName;
        stationsTableName = this.$store.getters.userAreaSwitchTableNameForStations;
      }
      this.RequestInfo(data,this.$store.state.sieveData.endTime,resultsTableName,stationsTableName)
    },
    watchEndTime(data){
      var resultsTableName,stationsTableName = '';
      if (this.$store.state.userInfo.role === 'ROLE_admin'){
        resultsTableName = this.$store.getters.sieveAreaSwitchTableName;
        stationsTableName = this.$store.getters.sieveAreaSwitchStationTableName;
      }else{
        resultsTableName = this.$store.getters.userAreaSwitchTableName;
        stationsTableName = this.$store.getters.userAreaSwitchTableNameForStations;
      }
      this.RequestInfo(this.$store.state.sieveData.startTime,data,resultsTableName,stationsTableName)
    },
    watchSieveMineArea(data){
      var resultsTableName,stationsTableName = '';
      if (this.$store.state.userInfo.role === 'ROLE_admin'){
        resultsTableName = this.$store.getters.sieveAreaSwitchTableName;
        stationsTableName = this.$store.getters.sieveAreaSwitchStationTableName;
      }else{
        resultsTableName = this.$store.getters.userAreaSwitchTableName;
        stationsTableName = this.$store.getters.userAreaSwitchTableNameForStations;
      }
      this.RequestInfo(this.$store.state.sieveData.startTime,this.$store.state.sieveData.endTime,data,stationsTableName);
    },
  }
};
</script>

<style scoped>
.space {
  height: 45px;
}

</style>